<template>
  <div>
    <!-- 1.2 默认插槽第二步就是往组件的innerHTML位置添加内容，此时添加的内容都会被放进column的坑里面去 -->
    <!-- <column>
      <h1>默认插槽</h1>
      <span>默认插槽</span>
    </column> -->

    <!-- <column>
       <header slot="toubu">头部</header> -->
       <!-- 2.2 给标签添加一个slot属性，这个slot属性的值，就是要插入的那个坑的名 -->
       <!-- <footer slot="weibu">尾部</footer>
    </column> -->

    <!-- 3.1 作用域插槽需要给标签加上slot-scope属性，它的值是一个对象，这个对象中保存的有slot组件里面的属性，可以通过对象点语法访问到 -->
    <column>
      <p slot-scope="scope">
        演示作用域插槽{{scope.size}}{{scope.row}}
      </p>
    </column>

    <el-row v-for="i in 5" :key="i">
      <el-col :span="4"><div class="grid-content bg-purple-dark"></div></el-col>
      <el-col :span="20">
        <el-row v-for="i in 5" :key="i">
          <el-col :span="4"><div class="grid-content bg-purple-light">4</div></el-col>
          <el-col :span="20"><span class="grid-content bg-purple-skyblue" v-for="i in 5" :key="i">20</span></el-col>
        </el-row>
      </el-col>
    </el-row>
    <my-button></my-button>
  </div>
</template>
<script>
// 引入组件
import Column from '../components/Column'
// import MyButton from '@/components/button/src/button'
export default {
  // 注入组件
  components: {
    Column
    // MyButton
  }
}
</script>
<style>
 .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .bg-purple-skyblue {
    background: skyblue;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
